<template>
	<view>
		<uni-swipe-action >
			<uni-swipe-action-item 
				:right-options="option" 
				v-for="(item,index) in cartList" 
				:key="item.objectId"
				@click="handleAction"
			>
				<view class="flex padding">
					<view class="flex align-center">
						<text 
							class="iconfont icon-gouxuan margin-right"
							:class="item.isCheck?'text-yellow':'text-grey'"
							@click="cartCheckMut(index)"
						></text>
						<image class="poster margin-right" :src="item.img" mode=""></image>
					</view>
					<view class="flex justify-between info list">
						<view class="">
							{{item.name}}
							<view class="margin-tb-xs">{{item.french}}</view>
							￥{{item.list[item.dropIdx].price}}
						</view>
						<view class="flex flex-direction align-end">
							<view class="edit margin-bottom-xs" @click="handleEdit(item,index)">
								<text class="iconfont icon-bianji"></text>
							</view>
							{{item.list[item.dropIdx].spec}}
							 X 
							{{item.num}}
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
				<view class="cu-bar foot bg-fff flex">
			<view class="flex flex-sub padding align-center">
				<text 
					class="iconfont icon-gouxuan margin-right-xs"
					:class="allInfo.allCheck?'text-yellow':'text-grey'"
					@click="cartAllCheckMut(allInfo.allCheck)"
				></text>全选
				<view class="margin-left">
					共计:{{allInfo.allPrice}}
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
		<cart-pop/>
	</view>
</template>

<script setup>
import { computed } from "vue";
import {onShow} from '@dcloudio/uni-app'
import { useMapMutations, useStoreHook, useStoreState } from "../../hooks/useStoreHook";
const {store} = useStoreHook()
const {cartList} = useStoreState('cart/cartList')

// 全选
const allInfo = computed(()=>store.getters['cart/allInfo'])

const {cartCheckMut,cartAllCheckMut} = useMapMutations([
	'cart/cartCheckMut',
	'cart/cartAllCheckMut'
])

//编辑
const handleEdit = (item,idx)=>{
	store.commit('cart/popDataMut',item) //显示弹窗数据
	store.commit('cart/editIdxMut',idx) //区分新增、编辑
	store.commit('cart/togglePopShow',true) //显示弹窗
}

// 删除
 const option = [
	{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}
  ]
  
const handleAction = ({index})=>{
	console.log(index);
	store.commit('cart/cartDelMut',index)
}

// 访问拦截
console.log('购物车页面初始化了');
onShow(()=>{
	console.log('购物车页面onShow');
	let {userInfo} = store.state.user
	if(!userInfo){
		uni.showModal({
			content:'请登录后再访问购物车',
			confirmText:'立即登录',
			confirmColor:'#857A72',
			cancelText:'稍后再说',
			success({confirm}) {
				console.log(confirm);
				if(confirm){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		})
	}
})
</script>

<style lang="scss">
page{
	padding-bottom: 100upx;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.flex.align-end{
	min-width: 210upx;
}
// .icon-gouxuan{
// 	color: #e7e7e7;
// }
.cu-btn.lg{
	width: 50%;
}
.cover-cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 690upx;
	transform: translateY(-50%);
	border-radius: 10upx;
}
.drop{
	position: relative;
	.drop-list{
		width: 300upx;
		position: absolute;
		top: 60upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover{
			background-color: #e6e6e6;
		}
	}
}
.foot{
	bottom:100upx;
	z-index: 2;
}
</style>
